﻿<style>
    .demo-option-label-item > span {
        margin-right: 6px;
    }
</style>

<Select Mode="multiple"
        Style="width: 100%"
        Placeholder="select one country"
        DefaultValue="@(new[]{"china"})"
        OptionLabelProp="label"
        OnChange=OnChange>
    <SelectOption Value="china" Label="China">
        <div className="demo-option-label-item">
            <span role="img" aria-label="China">🇨🇳</span>China (中国)
        </div>
    </SelectOption>
    <SelectOption Value="usa" Label="USA">
        <div className="demo-option-label-item">
            <span role="img" aria-label="USA">🇺🇸</span>USA (美国)
        </div>
    </SelectOption>
    <SelectOption Value="japan" Label="Japan">
        <div className="demo-option-label-item">
            <span role="img" aria-label="Japan">🇯🇵</span>Japan (日本)
        </div>
    </SelectOption>
    <SelectOption Value="korea" Label="Korea">
        <div className="demo-option-label-item">
            <span role="img" aria-label="Korea">🇰🇷</span>Korea (韩国)
        </div>
    </SelectOption>
</Select>

@using OneOf;
@code
{
    private void OnChange(OneOf<string, IEnumerable<string>, LabeledValue, IEnumerable<LabeledValue>> value, OneOf<SelectOption, IEnumerable<SelectOption>> option)
    {
        Console.WriteLine($"selected: ${value}");
    }
}
